import React, { lazy, Suspense } from 'react';
import { useSelector } from 'react-redux';

var NotFound = lazy(()=>import('../views/NotFound'))

interface Props {
    perm:string,
    children:any
}

//组件内需要传入一个权限标识(key), 传入需要验证的组件, 判断当前组件的权限标识是否在当前登陆用户的权限列表中
function AuthComponent(props:Props) {
    //获取store中的用户权限列表
    var checkedkeys = useSelector((state:any)=>state.userInfo.checkedkeys);
    //判断当前组件的权限标识是否在用户权限列表中.
    var res = checkedkeys.length == 0 || checkedkeys.includes(props.perm);
    return (
        <Suspense fallback={<div>Loading...</div>}>
            { res ? props.children : <NotFound />  }
        </Suspense>
    );
}

export default AuthComponent;